<template>
	<view>
		<picker-view
			v-if="visible"
			:indicator-style="indicatorStyle"
			:value="value"
			@change="bindChange"
		>
			<picker-view-column>
				<view class="item" v-for="(item, index) in hours" :key="index">
					{{ item }}时
				</view>
			</picker-view-column>
			<picker-view-column>
				<view
					class="item"
					v-for="(item, index) in minutes"
					:key="index"
				>
					{{ item }}分
				</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
export default {
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		const hours = [];
		const hour = date.getHours();
		const minutes = [];
		const minute = date.getMinutes();

		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}

		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}

		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		for (let i = 1; i <= 24; i++) {
			hours.push(i);
		}
		for (let i = 1; i <= 60; i++) {
			minutes.push(i);
		}
		return {
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			hour,
			hours,
			minutes,
			minute,

			value: [9999, month - 1, day - 1, hour - 1, minute - 1],
			/**
			 * 解决动态设置indicator-style不生效的问题
			 */
			visible: true,
			indicatorStyle: `height: ${Math.round(
				uni.getSystemInfoSync().screenWidth / (750 / 100)
			)}px;`
		};
	},
	methods: {
		bindChange(e) {
			const val = e.detail.value;
			this.year = this.years[val[0]];
			this.month = this.months[val[1]];
			this.day = this.days[val[2]];
			this.hour = this.hours[val[3]];
			this.minute = this.minutes[val[4]];
		}
	}
};
</script>

<style>
picker-view {
	width: 100%;
	height: 600rpx;
	margin-top: 20rpx;
}

.item {
	line-height: 100rpx;
	text-align: center;
}
</style>
